import React, { Component, Fragment } from 'react';
import { Card, Form, Input, Icon, Button, Checkbox, message } from 'antd';

const FormItem = Form.Item;

class Logins extends Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
      autoCompleteResult: []
    };
  }

  submit = () => {
    let userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {
      console.log(values);
      if (!err) {
        message.success(
          `${userInfo.user} 恭喜你，您通过本次表单组件学习，当前密码为：${
            userInfo.password
          }`
        );
      }
    });
  };

  render() {
    const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 } };

    const { getFieldDecorator } = this.props.form;

    return (
      <Fragment>
        <Card title="行内登录框">
          <Form layout="inline">
            <FormItem label="登录">
              <Input
                prefix={<Icon type="user" />}
                placeholder="input placeholder"
              />
            </FormItem>
            <FormItem label="密码">
              <Input
                prefix={<Icon type="lock" />}
                placeholder="input placeholder"
              />
            </FormItem>
            <FormItem>
              <Button type="primary">Submit</Button>
            </FormItem>
          </Form>
        </Card>

        <Card title="水平登录框">
          <Form>
            <FormItem label="登录" {...formItemLayout}>
              <Input
                prefix={<Icon type="user" />}
                placeholder="input placeholder"
              />
            </FormItem>
            <FormItem label="密码" {...formItemLayout}>
              <Input
                prefix={<Icon type="lock" />}
                placeholder="input placeholder"
              />
            </FormItem>
            <FormItem {...formItemLayout}>
              <Button type="primary">Submit</Button>
            </FormItem>
          </Form>
        </Card>

        <Card title="普通的登录框">
          <Form style={{ width: 400 }}>
            <FormItem>
              {getFieldDecorator('user', {
                initialValue: 'test',
                rules: [
                  {
                    required: true,
                    message: 'Please input your user!'
                  }
                ]
              })(<Input type="user" />)}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                initialValue: '123456',
                rules: [
                  {
                    required: true,
                    message: 'Please input your password!'
                  }
                ]
              })(<Input type="password" />)}
            </FormItem>
            <FormItem>
              <Checkbox defaultChecked value="rember">记住密码</Checkbox>
              <a href="/" style={{ float: 'right', color: 'bule' }}>
                忘记密码
              </a>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                style={{ width: '100%' }}
                onClick={this.submit}
              >
                Submit
              </Button>
            </FormItem>
          </Form>
        </Card>
      </Fragment>
    );
  }
}

export default Form.create()(Logins);
